<!-- author: xuett -->
<!-- date: 2023-01-12 10:34:25 -->
<!-- description: 布局配置 -->
<template>
  <G-drawer v-model:drawerShow="drawerShow" title="布局设置" :show-header="true" :width="400">
    <template #content>
      <div class="drawer-container">
        <div class="drawer-item">
          <span>默认主题色</span>
          <div class="system-color-box" @click="restoreDefault">
            <span class="system-color"></span>
          </div>
        </div>
        <div class="drawer-item">
          <span>自定义主题色</span>
          <el-color-picker v-model="theme" style="float: right; height: 26px; margin: -3px 8px 0 0" :predefine="predefineColors" @change="themeChange" />
        </div>
        <el-divider />
        <h3 class="drawer-title">系统布局配置</h3>
        <div class="drawer-item">
          <span>Top跟随主题色</span>
          <el-switch v-model="topColorSet" class="drawer-switch" />
        </div>
        <div class="drawer-item">
          <span>开启 Tags-Views</span>
          <el-switch v-model="tagsView" class="drawer-switch" />
        </div>
        <div class="drawer-item">
          <span>显示 Logo</span>
          <el-switch v-model="sidebarLogo" class="drawer-switch" />
        </div>
        <div class="drawer-item">
          <span>顶部菜单栏</span>
          <el-switch v-model="topNav" class="drawer-switch" />
        </div>
      </div>
    </template>
    <template #footer>
      <!-- <el-button type="primary" @click="handleClose">关闭</el-button> -->
      <el-button @click="resetSetting">重置</el-button>
    </template>
  </G-drawer>
</template>

<script setup>
import { useLayoutStore } from "@/store/layout";

const $layoutStore = useLayoutStore();

const $props = defineProps({
  settingShow: {
    type: Boolean,
    default: false
  }
});
const $emit = defineEmits(["update:settingShow"]);
const drawerShow = computed({
  get: () => $props.settingShow,
  set: (val) => $emit("update:settingShow", val)
});

//取色器预置
const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#71bc80",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#034F96"
]);

//主题色
const theme = computed({
  get: () => $layoutStore.theme,
  set: (val) => ($layoutStore.theme = val)
});
//主题色-变化
const themeChange = (val) => {
  console.log(123, val);
  console.log(111, document.getElementsByTagName("body")[0].style);
  document.body.style.setProperty("--theme-color", val);
  // document.getElementsByTagName("body")[0].style.setProperty("--theme-color", val);
};
//top跟随主题色
const topColorSet = computed({
  get: () => $layoutStore.topColorSet,
  set: (val) => ($layoutStore.topColorSet = val)
});
//开启 Tags-Views
const tagsView = computed({
  get: () => $layoutStore.tagsView,
  set: (val) => ($layoutStore.tagsView = val)
});
//显示 Logo
const sidebarLogo = computed({
  get: () => $layoutStore.sidebarLogo,
  set: (val) => ($layoutStore.sidebarLogo = val)
});

//顶部菜单栏
const topNav = computed({
  get: () => $layoutStore.topNav,
  set: (val) => ($layoutStore.topNav = val)
});

//重置配置
const resetSetting = () => {
  $layoutStore.restoreDefault();
  drawerShow.value = false;
};
// 恢复默认主题色
const restoreDefault = () => {
  theme.value = "#034f96";
  document.body.style.setProperty("--theme-color", "#034f96");
};
</script>

<style lang="scss" scoped>
.drawer-container {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 22px;
  }

  .drawer-item {
    width: 100%;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .system-color-box {
      width: 32px;
      height: 32px;
      padding: 4px;
      display: inline-block;
      border: 1px solid var(--el-border-color);
      cursor: pointer;
      .system-color {
        width: 100%;
        height: 100%;
        display: inline-block;
        background-color: #034f96;
      }
    }
  }
}
</style>
